<template>
    <div class="body">
        <header>
            <van-nav-bar title="我的资料" left-arrow @click-left="goBack" />

        </header>
        <section>
            <van-cell title="头像" is-link center>
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template #value >
                        <van-image width="40" height="40" :src="userInfo.avatarUrl" round />
                    </template>
                </van-cell>
            <van-cell title="昵称" is-link :value="userInfo.nickname" center/>
            <van-cell title="手机号" is-link :value="userMobile" center/>
            
            <van-cell title="出生年月" is-link  center value="未设置"/>
            <van-cell title="性别" is-link center value="未设置"/>
            
        </section>
    </div>
</template>

<script setup>
import { NavBar as vanNavBar, Cell as vanCell, Image as VanImage } from 'vant';
import { useRouter } from 'vue-router'
import { ref , computed } from 'vue';
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))

const router = useRouter()
const goBack = () => {
    router.go(-1)
}


const userMobile = computed(() => {
    let a = userInfo.value.mobile.slice(0, 3)
    let c = userInfo.value.mobile
    let e = c.split('').reverse().slice(0, 4).reverse().join('')
    return a + ' **** ' + e
})
</script>

<script>
export default {
    beforeRouteEnter(to, from, next) {
        let isAuthenticated = localStorage.getItem('userInfo')
        if (isAuthenticated) {
            if (Object.prototype.toString.call(JSON.parse(isAuthenticated)) === '[object Object]') next()
            else next({ name: "login", })
        } else {
            next({ name: "login", })
        }
    }
}
</script>

<style scoped lang="scss">
#app>div,
.body {
    height: 100%;
    background-color: #F4F4F4;
}

header {
    background-color: #fff;

    & :deep(.van-icon) {
        color: #000;
    }
}

section {
    margin-top: 10px;
}
</style>